<script setup>
import { ref, onMounted, computed, onUpdated } from 'vue';
import dayjs from 'dayjs';
import { getNewsLatest } from './services.js';

const week = ['天', '一', '二', '三', '四', '五', '六'];
const weekDay = computed(() => {
  return week[new Date().getDay()];
});

const nameList = ['王子如', '沈壮志', '代森', '栗子姐姐的彭于晏', '杭州麻将'];
const name = ref(nameList[Math.floor(Math.random() * nameList.length)]);
// const str = ref(`宝贝上班辛苦了，${name.value}提醒你离下班还有还剩：00:00:00`);
const str = ref(``);
const getTime = timestamp => {
  const ss = Math.floor((timestamp / 1000) % 60) + '';
  const mm = Math.floor((timestamp / 1000 / 60) % 60) + '';
  const hh = Math.floor((timestamp / 1000 / 60 / 60) % 24) + '';
  return [hh.padStart(2, 0), mm.padStart(2, 0), ss.padStart(2, 0)];
};

onMounted(() => {
  getNewsLatest().then(res => {
    console.log('x',res);
  })
  setInterval(() => {
    // console.log(weekDay.value)
    const offWorkTime = new Date(dayjs().format('YYYY-MM-DD') + ` ${weekDay.value === '二' || weekDay.value === '四' ? '20:30:00' : '18:00:00'}`).getTime();
    const timestamp = offWorkTime - new Date().getTime();
    if (timestamp > 0) {
      const [hh, mm, ss] = getTime(timestamp);
      if (name.value === '栗子姐姐的彭于晏') {
        str.value = `${name.value}提醒你，小宝贝离下班还剩：${hh}:${mm}:${ss}`;
      } else {
        str.value = `宝贝上班辛苦了，${name.value}提醒你离下班还剩：${hh}:${mm}:${ss}`;
      }
    } else {
      str.value = `下班啦，宝贝，辛苦了！`;
    }
  }, 1000);
});
</script>

<template>
  <main style="display: flex; justify-content: center; height: 100vh; align-items: center; flex-direction: column">
    <h1 class="green" style="text-align: center; font-size: 40px">
      {{ str }}
    </h1>
    <template v-if="str">
      <div v-if="name === '栗子姐姐的彭于晏'">
        <img src="../assets/1.jpg" alt="" style="max-height: 300px" />
      </div>
      <div v-else-if="name === '王子如'">
        <img src="../assets/2.gif" alt="" style="max-height: 300px" />
      </div>
      <div v-else-if="name === '代森'">
        <img src="../assets/3.jpg" alt="" style="max-height: 300px" />
      </div>
      <div v-else-if="name === '沈壮志'">
        <video src="../assets/1.mp4" autoplay loop muted style="max-height: 300px"></video>
      </div>
      <div v-else-if="name === '杭州麻将'">
        <img src="../assets/5.jpg" alt="" style="max-height: 300px" />
      </div>
    </template>
  </main>
</template>
